<template>
  <el-card shadow="never" class="aui-card--fill aui-card--jvm">
    <el-form :model="dataForm" ref="dataForm">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="JVM OS Info" v-if="dataForm.jvm" name="os">
          <template>
            <div v-html="dataForm.jvm.os"></div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="JVM Memory Info" v-if="dataForm.jvm" name="memory">
          <template>
            <div v-html="dataForm.jvm.memory"></div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="JVM Service Info" v-if="dataForm.jvm" name="service">
          <template>
            <div v-html="dataForm.jvm.service"></div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="JVM Runtime Info" v-if="dataForm.jvm" name="runtime">
          <template>
            <div v-html="dataForm.jvm.runtime"></div>
          </template>
        </el-collapse-item>
        <el-collapse-item title="JVM Thread Info" v-if="dataForm.jvm" name="thread">
          <template>
            <div v-html="dataForm.jvm.thread"></div>
          </template>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </el-card>
</template>
<style>
.aui-card--jvm .el-collapse-item__header {
  color: lightseagreen;
}

.aui-card--jvm div {
  font-size: 14px;
}
</style>
<script>
import moment from 'moment'
export default {
  data () {
    return {
      activeNames: ['os', 'memory', 'service'],
      url: '/monitor/jvm',
      dataForm: {
        jvm: null
      }
    }
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      this.$nextTick(() => {
        Promise.all([
          this.jvm()
        ]).then(() => {
        })
      })
    },
    timestampFormatDate (d) {
      return moment(Number.parseInt(d)).format('YYYY-MM-DD HH:mm:ss')
    },
    jvm () {
      return this.$http.get(this.url).then(({ data: res }) => {
        if (res.code !== 0) {
          return
        }
        this.dataForm.jvm = res.data
      }).catch(() => { })
    }
  }
}
</script>
